<template>
  <div class="omission" v-if="isExpansion">
    <button
      class="btn"
      :style="{ color: props.btnColor }"
      v-if="props.data.length > props.length"
      @click="isExpansion = false"
    >
      展开
    </button>
    <div class="omissionText">{{ props.data }}</div>
  </div>
  <div class="warp" v-else>
    <div class="expansion">
      <button class="btn" :style="{ color: props.btnColor }" @click="isExpansion = true">收起</button>
      <div class="text" ref="Text" v-html="getTextHTML(props.data)"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { useProjectStore } from '@/store';
import { computed, defineComponent, ref, onMounted, watch } from 'vue';
import { getTextHTML, marginBtm } from '@/pages/templatePage/templateitem6/utils/textHtml';
export default defineComponent({
  name: 'TextMax',
});
</script>
<script lang="ts" setup>
const store = useProjectStore();
const isExpansion = ref(true);
const Text = ref();

const props = defineProps({
  data: {
    type: String,
    default: '',
  },
  length: {
    type: Number,
    default: 225,
  },
  btnColor: {
    type: String,
    default: '',
  },
});
watch(
  () => isExpansion.value,
  () => {
    if (isExpansion.value) return;
    // nextTick(() => {
    //   if (Text.value) {
    //     Text.value.innerHTML =;
    //   }

    // });
  },
);
watch(
  () => props.data,
  () => {
    isExpansion.value = true;
    // nextTick(() => {
    //   if (Text.value) {
    //     Text.value.innerHTML = getTextHTML(props.data);
    //   }
    //   marginBtm(Text.value);
    // });
  },
);
</script>

<style lang="less" scoped>
.omissionText {
  word-wrap: break-word;
  font-family: 'SourceMedium';
}
.warp {
  display: flex;
}
.omission {
  text-indent: 2em;
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'SourceMedium';
  word-wrap: break-word;
}

.text {
  text-indent: 2em;
  :deep(p) {
    // color: #333;
    text-indent: 2em;
    margin-bottom: 12px;
  }
}

.btn {
  display: flex;
  align-items: center;
  float: right;
  clear: both;
  text-align: start;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-family: 'SourceHanSerifCN';
  cursor: pointer;
  height: 30px;
  line-height: 30px;
}

.omission:before {
  content: ' ';
  float: right;
  height: 113px;
}
.expansion {
  width: 100%;
  word-wrap: break-word;
  :deep(p) {
    font-family: 'SourceHanSerifCN';
  }
}
.expansion:before {
  content: '';
  float: right;
  height: calc(100% - 48px);
}
</style>
